import { ref, watch, onMounted } from 'vue';

// 创建一个共享的状态，确保在整个应用中使用相同的暗黑模式状态
const isDarkMode = ref(false);
let initialized = false;

export function useDarkMode() {
  // 只在第一次调用时初始化
  if (!initialized) {
    // 从本地存储中获取用户偏好
    onMounted(() => {
      // 检查本地存储中的偏好
      const storedPreference = localStorage.getItem('darkMode');
      
      if (storedPreference !== null) {
        // 使用存储的偏好
        isDarkMode.value = storedPreference === 'true';
      } else {
        // 检查系统偏好
        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        isDarkMode.value = prefersDark;
      }
      
      // 应用初始主题
      applyTheme();
      initialized = true;
    });
    
    // 监听暗黑模式变化，更新文档类和本地存储
    watch(isDarkMode, () => {
      applyTheme();
      localStorage.setItem('darkMode', isDarkMode.value);
    });
  }
  
  // 切换暗黑模式
  function toggleDarkMode() {
    isDarkMode.value = !isDarkMode.value;
  }
  
  // 应用主题到文档
  function applyTheme() {
    if (isDarkMode.value) {
      document.documentElement.classList.add('dark-theme');
    } else {
      document.documentElement.classList.remove('dark-theme');
    }
  }
  
  return {
    isDarkMode,
    toggleDarkMode
  };
}